<template>
  <ElContainer>
    <ElAside>
      <el-scrollbar>
        <Aside />
      </el-scrollbar>
    </ElAside>
    <ElContainer>
      <ElHeader>
        <Header />
      </ElHeader>
      <ElMain>
        <router-view />
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<script setup lang="ts">
import { ElContainer, ElMain, ElHeader, ElAside } from 'element-plus'

const { ContainerData } = defineProps(['ContainerData'])
const { Header, Aside } = ContainerData
</script>

<style scoped lang="less">
.el-container {
  height: 100vh;
  width: 100vw;
  .el-header {
    padding-left: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    padding: 0;
  }
}
</style>
